<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>执剑界面 AI 控制面板</title>
    <link rel="icon" href="./images/gongzhenglogo.png">
    <link rel="stylesheet" href="css/Layout.css">
</head>
<body>
<div class="sidebar">
    <!-- 用于显示日期和时间的元素 -->
    <div class="date"></div>

    <script>
        // 获取当前时间并格式化
        function updateDateTime() {
            const date = new Date();
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');

            // 拼接为 YYYY-MM-DD HH:mm 格式
            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;

            // 更新页面元素
            document.querySelector('.date').textContent = formattedDate;
        }

        // 页面加载时执行
        updateDateTime();
        setInterval(updateDateTime, 60000); // 每分钟更新一次
    </script>
    <div class="title">执剑系统ProMax<br>专业团队<br>专业AI</div>

    <div class="menu-item" onclick="handleMenuClick('chat')">
        <img src="images/大宝剑.png" alt="Chat">
        <span>我是执剑，有什么可以帮助你？</span>
    </div>
    <div class="menu-item" onclick="handleMenuClick('send')">
        <img src="images/大宝剑.png" alt="Send">
        <span>返回网页</span>
    </div>

    <div class="divider"></div>

    <div class="menu-item" onclick="handleMenuClick('settings')">
        <img src="images/大宝剑.png" alt="Settings">
        <span>获得更多执剑系统获取链接</span>
    </div>




    <div class="menu-item" onclick="handleMenuClick('feedback')">
        <img src="images/大宝剑.png" alt="Feedback">
        <span>打赏功能</span>
    </div>
    <div class="menu-item" onclick="handleMenuClick('about')">
        <img src="images/大宝剑.png" alt="About">
        <span>关于我们</span>
    </div>
    
    <div class="menu-item" onclick="handleMenuClick('close')">
        <img src="images/大宝剑.png" alt="Close">
        <span>投诉功能</span>
    </div>
    

    <div class="footer">
        <div class="ai-badge">内容由 AI 生成，请仔细阅读！</div>
        <div style="margin-top: 10px; cursor: pointer;" onclick="showHelp()">查看 App.11 帮助</div>
    </div>
</div>


<div class="main-content">
    <!-- 主内容区 -->
    <h1>欢迎使用 执剑 AI</h1>
    <p>请从左侧菜单选择操作</p>

    <!-- 美化后的输入框和提交按钮 -->
    <div class="input-container">
        <input type="text" id="userInput" placeholder="请输入内容...">
        <button onclick="sendMessage()" class="send-button">发送</button>
    </div>

    <!-- 对话框区域 -->
    <div id="chatBox" class="chat-container">
        <!-- 消息将在这里显示 -->
    </div>

    <!-- 思考区域 -->
    <div class="thinking-container">
        <h3>AI深度思考</h3>
        <div id="thinkingBox" class="thinking-content"></div>
    </div>
</div>

<style>
    /* 美化交互界面的样式 */
    .input-container {
        display: flex;
        margin: 20px 0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    #userInput {
        flex: 1;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-right: none;
        font-size: 16px;
        outline: none;
        transition: border 0.3s;
    }
    
    #userInput:focus {
        border-color: #4CAF50;
    }
    
    .send-button {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 12px 20px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
    }
    
    .send-button:hover {
        background-color: #45a049;
    }
    
    .chat-container {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        background-color: #f9f9f9;
    }
    
    .message {
        margin-bottom: 15px;
        padding: 10px 15px;
        border-radius: 8px;
        max-width: 80%;
        word-wrap: break-word;
    }
    
    .user-message {
        background-color: #DCF8C6;
        margin-left: auto;
        text-align: right;
    }
    
    .ai-message {
        background-color: #ECECEC;
    }
    
    .thinking-container {
        margin-top: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        background-color: #f5f5f5;
    }
    
    .thinking-container h3 {
        margin-top: 0;
        color: #333;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
    }
    
    .thinking-content {
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        min-height: 100px;
        white-space: pre-wrap;
        font-family: monospace;
        color: #555;
    }
    
    .loading {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top-color: #4CAF50;
        animation: spin 1s ease-in-out infinite;
        margin-right: 10px;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>

<script>
    function handleMenuClick(action) {
        const actions = {
            chat: () => alert('正在连接 AI 对话服务...'), // 修改为弹窗提示
            send: () => window.location.href = 'usersetHome.html',
            settings: () => window.open('#', '_blank'),
            download: () => window.location.href = '#',
            // feedback: () => window.open('3184894868@qq.com'),
            feedback: () => window.open('/images/打赏.jpg', '_blank'),
            about: () => alert('执剑 AI \nDeepSeek 技术支持') ,// 修改为弹窗提示
            close: () => window.close()
        };
        if (actions[action]) actions[action]();
    }

    function showHelp() {
        const helpContent = `
            执剑 帮助文档：
            1. 点击菜单项进行对应操作
            2. 客户端支持 Windows/macOS/Linux
            3. 如果遇到执剑处理不了的内容请直接退出
            `;
        alert(helpContent); // 修改为弹窗提示
    }

    // 初始化高亮第一个菜单项
    document.querySelectorAll('.menu-item')[0].style.background = '#333';

    // 修改后的 sendMessage 函数
    function sendMessage() {
        const userInput = document.getElementById('userInput').value;
        if (userInput.trim() === '') {
            alert('请输入内容');
            return;
        }

        // 添加用户消息到聊天框
        const chatBox = document.getElementById('chatBox');
        const userMessageElement = document.createElement('div');
        userMessageElement.className = 'message user-message';
        userMessageElement.textContent = userInput;
        chatBox.appendChild(userMessageElement);
        
        // 清空输入框
        document.getElementById('userInput').value = '';

        // 显示加载状态
        const loadingElement = document.createElement('div');
        loadingElement.className = 'message ai-message';
        const loadingSpinner = document.createElement('span');
        loadingSpinner.className = 'loading';
        loadingElement.appendChild(loadingSpinner);
        loadingElement.appendChild(document.createTextNode('正在处理中...'));
        chatBox.appendChild(loadingElement);
        
        // 滚动到底部
        chatBox.scrollTop = chatBox.scrollHeight;

        // 发送请求到后端接口
        fetch(`http://localhost:8080/ai/chat?prompt=${encodeURIComponent(userInput)}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 尝试直接获取响应文本，不检查 Content-Type
                return response.text();
            })
            .then(text => {
                try {
                    // 移除加载状态
                    chatBox.removeChild(loadingElement);
                    
                    // 尝试解析为 JSON
                    const data = JSON.parse(text);
                    
                    // 创建AI回复消息
                    const messageElement = document.createElement('div');
                    messageElement.className = 'message ai-message';
                    
                    // 获取回复内容
                    const responseText = data.response || data.content || data.answer || data.result || text;
                    
                    // 检查是否包含思考内容
                    const thinkMatch = responseText.match(/<think>([\s\S]*?)<\/think>/);
                    let displayText = responseText;
                    
                    if (thinkMatch) {
                        // 提取思考内容
                        const thinkContent = thinkMatch[1];
                        // 从显示文本中移除思考内容
                        displayText = responseText.replace(/<think>[\s\S]*?<\/think>/, '');
                        
                        // 显示思考内容到思考框
                        document.getElementById('thinkingBox').textContent = thinkContent;
                    }
                    
                    messageElement.textContent = displayText;
                    chatBox.appendChild(messageElement);
                } catch (jsonError) {
                    console.error('JSON parse error:', jsonError);
                    // 如果 JSON 解析失败，直接显示文本内容
                    
                    // 创建AI回复消息
                    const messageElement = document.createElement('div');
                    messageElement.className = 'message ai-message';
                    
                    // 检查是否包含思考内容
                    const thinkMatch = text.match(/<think>([\s\S]*?)<\/think>/);
                    let displayText = text;
                    
                    if (thinkMatch) {
                        // 提取思考内容
                        const thinkContent = thinkMatch[1];
                        // 从显示文本中移除思考内容
                        displayText = text.replace(/<think>[\s\S]*?<\/think>/, '');
                        
                        // 显示思考内容到思考框
                        document.getElementById('thinkingBox').textContent = thinkContent;
                    }
                    
                    messageElement.textContent = displayText;
                    chatBox.appendChild(messageElement);
                }
                
                // 滚动到底部
                chatBox.scrollTop = chatBox.scrollHeight;
            })
            .catch(error => {
                console.error('Error:', error);
                // 移除加载状态
                chatBox.removeChild(loadingElement);

                // 在页面上显示具体的错误信息
                const errorElement = document.createElement('div');
                errorElement.className = 'message ai-message error-message';
                errorElement.textContent = `发送失败: ${error.message}`;
                chatBox.appendChild(errorElement);
                
                // 滚动到底部
                chatBox.scrollTop = chatBox.scrollHeight;
            });
    }
    
    // 添加按Enter键发送消息的功能
    document.getElementById('userInput').addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            sendMessage();
        }
    });
</script>
</body>
</html>
